import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, Dimensions, FlatList } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { colors } from '../Utils/theme';
import I18n from '../Utils/i18n';
import RefreshableFlatList from 'react-native-refreshable-flatlist';
import Echarts from 'native-echarts';

const deviceW = Dimensions.get('window').width;
const deviceH = Dimensions.get('window').height;
const basePx = 375;

function px2dp(px) {
  return px *  deviceW / basePx
}

const { width } = Dimensions.get('window');

class HeaderBar extends Component {
  render() {
    return (
      <View style={styles.header}>
        <Icon name="qrcode" style={styles.qrcodeIcon} size={px2dp(22)}/>
        <Text style={styles.headerTitle}>
          Wallet
        </Text>
        <Image source={require('../../assets/images/logo.png')} style={styles.logo}/>
      </View>
    );
  }
}

class AccountBar extends Component {
  render() {
    return (
      <View style={styles.accountBar}>
        <View style={styles.accountBarLeftContent}>
          <Text style={styles.accountBarLeftContentMoney}>
            $ 432,903.19
          </Text>
          <Text style={styles.accountBarLeftContentDate}>
            {I18n.t('wallet.total_asset')}
          </Text>
        </View>
        <View style={styles.accountBarRightContent}>
           <Text style={styles.accountBarRightContentMoney}>
            $ 2,130.82
           </Text>
           <Text style={styles.accountBarRightContentDate}>
            {I18n.t('wallet.pl_last_day')}
           </Text>
        </View>
        <Icon name="chevron-right" style={styles.chevronRight} size={px2dp(22)}/>
      </View>
    );
  }
}
class ChartBar extends Component {
  state = {
    dataSource: [
      {name: 'Cash', pencent: '32%'},
      {name: 'Coins', pencent: '26%'},
      {name: 'Funds', pencent: '11%'},
      {name: 'ICOs', pencent: '31%'},
    ],
  }
  _renderRow = ({item}) => {
    if (item.index == 0) {
      return <View style={styles.topCell}>
        <View style={styles.separator} />
        <View style={styles.shortCell}>
          <Text style={styles.eachName}>{item.name}</Text>
          <Text style={styles.eachPercent}>{item.pencent}</Text>
        </View>
      </View>
    } else if (item.index == this.state.dataSource.length - 1) {
      return <View style={styles.bottomCell}>
        <View style={styles.separatorCenter} />
        <View style={styles.shortCell}>
          <Text style={styles.eachName}>{item.name}</Text>
          <Text style={styles.eachPercent}>{item.pencent}</Text>
        </View>
        <View style={styles.separator} />
      </View>
    } else {
      return <View style={styles.centerCell}>
        <View style={styles.separatorCenter} />
        <View style={styles.shortCell}>
          <Text style={styles.eachName}>{item.name}</Text>
          <Text style={styles.eachPercent}>{item.pencent}</Text>
        </View>
      </View>
    }
  }
  render() {
    const {dataSource} = this.state;
    const options = option = {
      tooltip: {
        trigger: 'item',
        formatter: "{b}: {d}%",
        position: ['25%', '40%']
      },
      series: [
        {
          name:'ASSET ALLOCATION',
          type:'pie',
          radius: ['45%', '90%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'inner',
              fontSize: 12,
              color: 'black'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: 12,
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          color: ['lightGreen', 'red', 'blue', 'green'],
          data:[
            {name: 'Cash', value: 32},
            {name: 'Coins', value: 26},
            {name: 'Funds', value: 11},
            {name: 'ICOs', value: 31},
          ]
        }
      ]
    };
    return (
      <View style={styles.assetAllocation}>
        <Text style={styles.assetAllocationTitle}>
          ASSET ALLOCATION
        </Text>
        <View style={styles.assetAllocationContent}>
          <View style={styles.pieContainer}>
            <Echarts option={option} height={130}/>
          </View>
          <View style={styles.pieDetail}>
            <View style={styles.pieDetailList}>
              <FlatList
                style={styles.pieDetailListSelf}
                data={dataSource.map((item, index) => Object.assign(item, {index, key: index}))}
                renderItem={this._renderRow}
                renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>1</Text>}
              />
            </View>
            <View>
              
            </View>
          </View>
        </View>
      </View>
    );
  }
}

class TransList extends Component {
  state = {
    data: new Array(3).fill(1).map((x, i) => ({ id: i, text: `Item No. ${i}` })),
    dataSource: [
      {id: 1, text: 'Kiosk Basel Station', date: '12.Jan.2018 14:23', rightValue: '-12.00 EUR'},
      {id: 2, text: 'Market Buy', date: '12.Jan.2018 14:23', rightValue: '600 MSFT'},
      {id: 3, text: 'Market Sell', date: '12.Jan.2018 14:23', rightValue: '-2.6800 Bitcoin'},
      {id: 4, text: 'Thomas Bauer', date: '12.Jan.2018 14:23', rightValue: '700.00 CHF'},
      {id: 6, text: '', date: '', rightValue: 'More...'}
    ]
  }
  render() {
    return (
      <View style={styles.transList}>
        <RefreshableFlatList
          data={this.state.dataSource}
          renderItem={({ item }) => (
            <View key={item.id} style={styles.row}>
              <View style={styles.transListItemLeft}>
                <Text style={styles.text1}>{item.text}</Text>
                <Text style={styles.text2}>{item.date}</Text>
              </View>
              <View style={styles.transListItemRight}>
                <Text style={styles.transListItemRightValue}>{item.rightValue}</Text>
              </View>
              <Icon name="chevron-right" style={styles.chevronRightMini} size={px2dp(12)} color="#5e5e5f"/>
            </View>
          )}
          ref={(ref) => { this.flatList = ref; }}
          onRefreshing={() => new Promise((r) => {
            setTimeout(() => {
              r();
            }, 3000);
          })}
          onLoadMore={() => new Promise((r) => {
            setTimeout(() => {
              const no = this.state.data.length;
              const newArr = new Array(4).fill(1).map((x, i) => ({ id: i + no, text: `Item No. ${i + no}` }));
              this.setState({ data: this.state.data.concat(newArr) });
              r();
            }, 2500);
          })}
          keyExtractor={item => item.id}
        />
      </View>
    );
  }
}

export default class CreditCard extends Component {
  render() {
    return (
      <View style={styles.creditCard}>
        <HeaderBar />
        <AccountBar />
        <ChartBar />
        <View style={styles.transTitle}>
          <Text>{I18n.t('wallet.last_trx')}</Text>
        </View>
        <TransList />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  creditCard: {
    flex: 1
  },
  container: {
    flex: 1
  },
  logo: {
    position: 'absolute',
    right: 20,
    top: 20,
    width:80,
    height:40
  },
  header: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.icon.color3,
    flexDirection: 'row',
    padding: 30
  },
  headerTitle: {
    color: colors.text.color5,
    fontSize: 20
  },
  qrcodeIcon: {
    position: 'absolute',
    color: colors.icon.color7,
    left: 20,
    top: 34
  },
  accountBar: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.icon.color2,
    flexDirection: 'row',
    padding: 15
  },
  accountBarLeftContent: {
    flex: 1,
    alignItems: 'center'
  },
  accountBarLeftContentMoney: {
    color: colors.text.color5,
    fontSize: 15
  },
  accountBarLeftContentDate: {
    color: colors.text.color5,
    fontSize: 10,
    marginTop: 5
  },
  accountBarRightContentMoney: {
    color: colors.text.color5,
    fontSize: 15
  },
  accountBarRightContentDate: {
    color: colors.text.color5,
    fontSize: 10,
    marginTop: 5
  },
  accountBarRightContent: {
    flex: 1,
    alignItems: 'center'
  },
  chevronRight: {
    marginRight: 8,
    color: colors.text.color5
  },
  chevronRightMini: {
    position: 'absolute',
    right: 20,
    top: 19,
    color: colors.text.color5
  },
  assetAllocation: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 20,
    paddingRight: 20
  },
  assetAllocationTitle: {
    color: colors.text.color5,
    fontSize:15,
    height: 35,
    lineHeight: 35,
    alignSelf: 'center'
  },
  assetAllocationContent: {
    flexDirection: 'row',
    height: 150
  },
  pieContainer: {
    flex: 4,
    alignItems: 'center',
    height: 150
  },
  pieDetail: {
    flex: 5
  },
  pieDetailList: {
    flex: 1
  },
  pieDetailListSelf: {
    alignSelf: 'flex-end'
  },
  topCell: {
    flex: 1,
    flexDirection: 'column',
    height: 25,
    width: 170
  },
  shortCell: {
    alignSelf: 'flex-end',
    height: 25,
    width: 150
  },
  bottomCell: {
    flex: 1,
    height: 25,
    width: 170
  },
  centerCell: {
    alignSelf: 'flex-end',
    height: 25,
    width: 150
  },
  eachPercent: {
    height: 25,
    lineHeight: 25,
    position: 'absolute',
    right: 0,
    fontSize: 12
  },
  eachName: {
    height: 25,
    lineHeight: 25,
    fontSize: 12
  },
  transTitle: {
    justifyContent: 'center',
    backgroundColor: colors.icon.color2,
    height: 25,
    zIndex: 10,
    paddingLeft: 20,
    paddingRight: 20
  },
  transList: {
    overflow: 'hidden',
    paddingTop: 2,
    paddingBottom: 5,
    paddingLeft: 10,
    paddingRight: 0,
    height: '100%'
  },
  row: {
    padding: 10,
    height: 50,
    width,
    backgroundColor: '#ffffff',
    borderTopWidth: 1,
    marginBottom: -1,
    borderBottomColor: colors.text.color4,
    borderTopColor: colors.text.color4,
    borderBottomWidth: 1,
    justifyContent: 'flex-start'
  },
  transListItemLeft: {
    position: 'absolute',
    left: 5,
    top: 10
  },
  transListItemRight: {
    position: 'absolute',
    right: 50
  },
  transListItemRightValue: {
    height: 50,
    lineHeight: 50,
    fontSize: 14,
    color: colors.text.color1
  },
  text1: {
    fontSize: 14,
    textAlign: 'left',
    color: colors.text.color1
  },
  text2: {
    fontSize: 10,
    textAlign: 'left',
    color: colors.text.color3
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  separator: {
    height: 1,
    backgroundColor: colors.text.color4
  },
  separatorCenter: {
    alignSelf: 'flex-end',
    height: 1,
    width: 150,
    backgroundColor: colors.text.color4
  }
});
